<template>
  <van-steps direction="vertical" class="steps-container" :active="active">
    <template v-for="(item, index) in stepList">
      <van-step
        :key="index"
        :class="'state-' + item.state"
      >
        <van-row class="step-content">
          <van-col span="4"><p>{{ item.state | statusFilter }}</p></van-col>
          <van-col span="10"><p>{{ item.taskName }}</p></van-col>
          <van-col span="10"><p>{{ item.state === 1 ? item.endActTime : (item.state == 2 ? item.startActTime: '') }}</p></van-col>
        </van-row>
      </van-step>
    </template>
  </van-steps>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { Step, Steps, Col, Row } from 'vant'
@Component({
  name: 'FlowSteps',
  components: {
    [Step.name]: Step,
    [Steps.name]: Steps,
    [Col.name]: Col,
    [Row.name]: Row
  },
  filters: {
    statusFilter: (state: number) => {
      switch (state) {
        case 0:
          return '未执行'
        case 1:
          return '已完成'
        case 2:
          return '执行中'
      }
    }
  }
})

export default class extends Vue {
  @Prop({ required: false }) private stepList!: any[]

  private active: number = -1
}
</script>

<style lang="scss">
.steps-container {
  .van-step {
    &.state-1, &.state-2 {
      .van-step__circle-container {
        .van-step__circle {
          position: relative;
          display: inline-block;
          font: normal normal normal 0.37333rem/1 vant-icon;
          font-size: inherit;
          text-rendering: auto;
          -webkit-font-smoothing: antialiased;
          width: auto;
          height: 0;
        }
      }
    }
    &.state-2 {
      .van-step__circle-container {
        .van-step__circle {
          background-color: #38f;
          &::after {
            content: '\F086';
          }
        }
      }
    }
    &.state-1 {
      .van-step__circle-container {
        .van-step__circle {
          background-color: #07c160;
          &::after {
            content: '\F02F';
          }
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.steps-container {
  .van-step {
    &.state-1 {
      color: #07c160;
    }
    &.state-2 {
      color: #38f;
    }
    .step-content {
      p {
        margin: 0;
      }
    }
  }
}
</style>
